.content(ng-controller="ContentController as content")
  span(npm-loading)
  include ./npm-doctor-log.pug
  .row.home.bg-ultralight(ng-show="content.tabs.length <= 0")
    div
      .separator10
      small.color-black
        | Select or drag npm projects to start
      .separator10
      .separator10
      button.home-button(ng-click="shell.openChooser()")
        | Add projects
  .tab(npm-tabs, ng-repeat="tab in content.tabs", npm-tab-id="{{tab}}", ng-show="content.activeTab === tab && tab")
    .tab-menu
      span.tab-button(ng-repeat="tab in content.tabs", ng-class="{'active': content.activeTab === tab}", ng-click="content.activeTab = tab")
        spanner(ng-if="tab === '<global>'")
          img.global-img(src="img/npm-logo-cube.svg")
          | Globals
        spanner(ng-if="tab !== '<global>'")
          | {{ tab | lastNameInPath}}
        a(ng-click="content.closeProjectTab(tab)")
          i(class="fa fa-remove")
    include ./top.pug
    div(ng-show="tab")
      .row.table-header
        .col-xs-4.clickable(ng-click="sortTableBy('name')")
          | Package
          i(class="fa", ng-class="{'fa-sort': !tableOrderBy.includes('-name') || !tableOrderBy.includes('name'), 'fa-sort-down': tableOrderBy.includes('-name'), 'fa-sort-up': tableOrderBy.includes('name')}")
        .col-xs-2
          | Current
        .col-xs-2
          | Wanted
        .col-xs-2
          | Latest
        .col-xs-2.clickable(ng-click="sortTableBy('kind')")
          | Env
          i(class="fa", ng-class="{'fa-sort': !tableOrderBy.includes('-kind') || !tableOrderBy.includes('kind'), 'fa-sort-down': tableOrderBy.includes('-kind'), 'fa-sort-up': tableOrderBy.includes('kind')}")
      .table-body(ng-table-keyboard, ng-class="{'freezed': showLoadingSelectedRow}")
        .table-loader(ng-show="loading && !loaded")
          .table-loader-content
            img(src='img/loading.svg')
            | Loading packages...
        <!-- show disabled npm global row if in globals-->
        .row.table-row.disabled(ng-repeat='aPackage in packageInformations', ng-if="isGlobalProject && aPackage.name === 'npm'", title="Do not perform npm global actions from here")
          .col-xs-4 {{ aPackage.name }}
          .col-xs-2
            span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
              | {{ aPackage.current }}
          .col-xs-2
            i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
            | {{ aPackage.wanted }}
          .col-xs-2
            b(ng-if="aPackage.latest")
              | {{ aPackage.latest }}
            i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
          .col-xs-2
            | {{ aPackage.kind }}
        <!-- show all packages except for npm global-->
        .row.table-row(ng-repeat='aPackage in packageInformations | orderBy: tableOrderBy', ng-hide="!packageInformations", id="table-item-{{$index}}", ng-table-keyboard-selected-items="selectedPackages", ng-if="!isGlobalProject ||  isGlobalProject && aPackage.name !== 'npm'", selection-model, selection-model-mode="'multiple'", selection-model-selected-items="selectedPackages", ng-click="selectPackages(selectedPackages)", ng-class="{'active': selectedPackages.includes(aPackage), 'table-row-loading': currentSelectedPackages.includes(aPackage) && showLoadingSelectedRow}")
          .col-xs-4 {{ aPackage.name }}
          .col-xs-2
            span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
              | {{ aPackage.current }}
          .col-xs-2
            i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
            | {{ aPackage.wanted }}
          .col-xs-2
            b(ng-if="aPackage.latest")
              | {{ aPackage.latest }}
            i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
          .col-xs-2
            | {{ aPackage.kind }}
      div
        div.table-infos
          include ./package-informations.pug
